<template>
  <div class="sort">
    <div
      class="content"
      v-for="(item, index) in sort"
      :key="index"
      @click="changeColor(item, index)"
    >
      <div :style="{ color: currIndex == index ? '#b0352f' : '' }">
        {{ item.name }}
      </div>
      <div class="sortIcon" v-if="item.name != '综合'">
        <i
          class="iconfont icon-shangjiantou"
          :class="{ active: item.sort == 1 }"
        ></i>
        <i
          class="iconfont icon-xiajiantou"
          :class="{ active: item.sort == 2 }"
        ></i>
      </div>
    </div>
  </div>
</template>

<script>
import http from "@/common/api/request"
export default {
  data() {
    return {
      currIndex: 0,
      sort: [
        { name: "综合",key:'zh' },
        { name: "销量", sort: 0, key: "num" },
        { name: "价格", sort: 0, key: "price" },
      ],
    };
  },
  methods: {
    getdata() {
      http
        .$axios({
          url: `/api/goods/shopList`,
          params: {
            searchName: this.$route.query.keyWord,
            ...this.orderBy
          },
        })
        .then((res) => {
        
          
     
        });
    },
    changeColor(item, index) {
      if (index == this.currIndex) {
        this.sort[this.currIndex].sort =
          this.sort[this.currIndex].sort == 1 ? 2 : 1;
        this.getdata()
        return;
      }
      this.sort[this.currIndex].sort = 0;
      this.currIndex = index;
      this.sort[this.currIndex].sort = 1;
      // 发送升序还是降序的请求
      this.getdata()        
    },
  },
  computed: {
    orderBy() {
      //  知道当前是哪个对象
      let obj = this.sort[this.currIndex];
      // 针对状态是升序还是降序
      let val = obj.sort == 1 ? "asc" : "desc";
      return {
        [obj.key]: val,
      };
    },
  },
  mounted(){
    console.log(this.orderBy);
  }
};
</script>

<style scoped lang='scss'>
body {
  background-color: rebeccapurple;
}

.active {
  color: #b0352f;
}
.sort {
  background-color: white;
  display: flex;
  justify-content: space-around;

  font-size: 4.6vw;
}
.content {
  padding: 2vw 0;
  display: flex;
  align-items: center;
}
.sortIcon {
  padding: 1vw;
  display: flex;
  flex-direction: column;
}
</style>